import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
import Loading from '../components/Loading';

const fetch = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据加载完成');
    }, 2000);
  });
};

class Tab2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: 'option1',
      inputValue: '',
      result: '',
      loading: false,
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    fetch().then(res => {
      if (res) {
        this.setState({ loading: false });
      }
    });
  }

  render() {
    return (
      <>
        <Loading visible={this.state.loading} />
        <Text style={styles.text}>请选择一个选项：</Text>
        <Picker
          selectedValue={this.state.selectedValue}
          style={styles.picker}
          onValueChange={itemValue => this.setState({ selectedValue: itemValue })}>
          <Picker.Item label="选项一" value="option1" />
          <Picker.Item label="选项二" value="option2" />
          <Picker.Item label="选项三" value="option3" />
        </Picker>
        <Text style={styles.text}>请输入内容：</Text>
        <TextInput
          style={styles.input}
          value={this.state.inputValue}
          onChangeText={text => this.setState({ inputValue: text })}
          placeholder="输入内容"
        />
        <Button
          title="提交"
          onPress={() => {
            console.log('🚀🚀🚀dz-log提交成功');
            this.setState({
              result: `选择: ${this.state.selectedValue}, 输入: ${this.state.inputValue}`,
            });
          }}
        />
        {this.state.result ? <Text style={styles.result}>{this.state.result}</Text> : null}
      </>
    );
  }
}
export default function Demo() {
  return (
    <ScrollableTabView
      style={{ marginTop: 30 }}
      initialPage={0}
      renderTabBar={() => <DefaultTabBar />}>
      <View tabLabel="第一页" style={styles.container}>
        <Text style={styles.text}>这是第一个页签内容</Text>
      </View>
      <View tabLabel="第二页" style={styles.container}>
        <Tab2 />
      </View>
    </ScrollableTabView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  text: {
    marginVertical: 8,
    fontSize: 16,
  },
  picker: {
    height: 200,
    width: '100%',
    marginBottom: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  },
  result: {
    marginTop: 16,
    color: 'green',
    fontSize: 16,
  },
});
